.yakit-radio-buttons-solid {
    --yakit-solid-primary-font-color: var(--Colors-Use-Main-On-Primary);
    --yakit-solid-primary-font-hover-color: var(--Colors-Use-Main-Hover);
    display: inline-flex;
    align-items: center;
    :global {
        .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
            color: var(--yakit-solid-primary-font-color);
            background: var(--radio-buttons-background-color);
            border-color: var(--radio-buttons-border-color);
        }

        .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover {
            background: var(--radio-buttons-background-hover-color);
            border-color: var(--radio-buttons-border-hover-color);
        }

        .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
            background: var(--radio-buttons-background-active-color);
            border-color: var(--radio-buttons-border-active-color);
            box-shadow: 0 0 0 2px var(--radio-buttons-box-shadow-color);
        }
    }
}

// ========================== middle ==========================
.yakit-radio-buttons-middle {
    --radio-buttons-box-shadow-color: var(--Colors-Use-Main-Focus);
    --radio-buttons-border-color: var(--Colors-Use-Main-Primary);
    --radio-buttons-border-hover-color: var(--Colors-Use-Main-Border);
    --radio-buttons-border-active-color: var(--Colors-Use-Main-Pressed);

    --radio-buttons-primary-font-color: var(--Colors-Use-Main-Primary);
    --radio-buttons-primary-font-hover-color: var(--Colors-Use-Main-Primary);

    --radio-buttons-background-color: var(--Colors-Use-Main-Primary);
    --radio-buttons-background-hover-color: var(--Colors-Use-Main-Hover);
    --radio-buttons-background-active-color: var(--Colors-Use-Main-Pressed);

    :global {
        .ant-radio-button-wrapper:first-child {
            border-radius: 4px 0 0 4px;
        }

        .ant-radio-button-wrapper:last-child {
            border-radius: 0 4px 4px 0;
            &::before{
                background-color: var(--Colors-Use-Neutral-Border);
            }
        }

        .ant-radio-button-wrapper {
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            border-color: var(--Colors-Use-Neutral-Border);
            background: var(--Colors-Use-Basic-Background);
            color: var(--Colors-Use-Neutral-Text-1-Title);
            word-break: keep-all;
            &:not(:first-child)::before{
                background-color: var(--Colors-Use-Neutral-Border);
            }
        }

        .ant-radio-button-wrapper:hover {
            color: var(--radio-buttons-primary-font-hover-color);
        }

        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
            color: var(--radio-buttons-primary-font-color);
            border-color: var(--radio-buttons-border-color);
        }

        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
            box-shadow: 0 0 0 2px var(--radio-buttons-box-shadow-color);
        }

        .ant-radio-button-wrapper:focus-within {
            box-shadow: 0 0 0 2px var(--radio-buttons-box-shadow-color);
        }

        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
            box-shadow: 0 0 0 2px var(--radio-buttons-box-shadow-color);
        }

        .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
            background: var(--radio-buttons-background-color);
        }
        .ant-radio-button-wrapper-disabled:hover {
            color: var(--Colors-Use-Neutral-Text-1-Title);
        }

        .ant-radio-button-wrapper-checked:not(
                [class*=" ant-radio-button-wrapper-disabled"]
            ).ant-radio-button-wrapper:first-child {
            border-color: var(--radio-buttons-border-color);
            border-right-color: var(--radio-buttons-border-color);
        }
    }
}

// ========================== max-large ==========================
.yakit-radio-buttons-max-large {
    :global {
        .ant-radio-button-wrapper {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: 500;
        }
    }
}

// ========================== large ==========================
.yakit-radio-buttons-large {
    :global {
        .ant-radio-button-wrapper {
            height: 28px;
            line-height: 28px;
            font-weight: 500;
        }
    }
}

// ========================== small ==========================
.yakit-radio-buttons-small {
    :global {
        .ant-radio-button-wrapper {
            height: 20px;
            line-height: 14px;
            font-weight: 500;
            font-size: 11px;
        }
    }
}
